<template>
  <div id="app">

    <div class="main">
      <router-view></router-view>
    </div>


    <div class="bottom">
      <ul class="list">
        <li>
          <router-link :to="{ name: 'shouye' }">
            <img v-if="$route.path == '/shouye'" src="./assets/img/首页/一级路由/选中的首页.png" width="35px" alt="">
            <img v-else src="./assets/img/首页/一级路由/首页.png" alt="">
            <span>首页</span>
          </router-link>
        </li>
        <li>
          <router-link :to="{ name: 'xiaozhen' }">
            <img src="./assets/img/首页/一级路由/盒马小镇.png" alt="">
            <span>盒马小镇</span>
          </router-link>
        </li>
        <li>
          <router-link :to="{ name: 'eatwhat' }">
              <img v-if="$route.path == '/eatwhat'" class="bigimg" src="./assets/img/首页/一级路由/选中的吃什么.png" alt="">
              <img v-else src="./assets/img/首页/一级路由/吃什么.png" alt="">
              <span v-if="$route.path == '/eatwhat'">发布</span>
              <span v-else>吃什么</span>
          </router-link>
        </li>
        <li>
          <router-link :to="{ name: 'car' }">
            <img v-if="$route.path == '/car'" src="./assets/img/首页/一级路由/选中的购物车.png" alt="">
            <img v-else src="./assets/img/首页/一级路由/购物车.png" alt="">
            <span>购物车</span>
          </router-link>
        </li>
        <li>
          <router-link :to="{ name: 'wode' }">
            <img v-if="$route.path == '/wode'" src="./assets/img/首页/一级路由/选中的个人中心.png" alt="">
            <img v-else src="./assets/img/首页/一级路由/我的.png" alt="">
            <span>我的</span>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>


export default {
  name: 'App',

}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 16px;
  text-decoration: none;
}

a {
  color: #414141;
  font-size: 14px;
}

html,
body,
#app {
  height: 100vh;
  overflow: hidden;
}

#app {
  display: flex;
  flex-direction: column;


  .main {
    overflow: auto;
    background-color: #F6F6F6;
    flex: 1;
  }



  .bottom {
    width: 100%;
    height: 70px;

    background-color: #fff;
    border-top: 1px solid #EBEBEB;
    font-weight: 600;


    .list {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: space-around;

      li a {
        display: flex;
        flex-direction: column;
        align-items: center;
        .bigimg{
          width: 50px;
        }
        img {
          width: 30px;
        }
      }

      .router-link-active {
        color: #449FC3;
      }
    }
  }
}
</style>
